<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- https://cdn.bootcdn.net/ajax/libs/pixi.js/8.12.0/pixi.js -->
    <script src="./assets/js/pixi_8.12.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #container{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 800px;
            height: 600px;
            border: 1px solid #ddd;


            canvas{
                height: 100%;
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
        async function start(){
            const app = new PIXI.Application()

            const WIDTH = 800;
            const HEIGHT = 600;

            await app.init({
                width: WIDTH,
                height: HEIGHT,
                antialias: true,
                backgroundColor: "#fff",
            })
            document.getElementById("container").appendChild(app.canvas)


            /**
             * pixijs绘制文本提供了三种方法
             * 1. Text
             * 2. BitmapText
             * 3. HTMLText
             * 
            **/

            const textStyle = new PIXI.TextStyle({
                fontSize: 30,
                fill: "#333",
                wordWrap: true,
                wordWrapWidth: 800,
                breakWords: true,
                align: "left"
            })

            //  第一种 Text
            const text = new PIXI.Text({
                text: "Hello Pixi.js Hello Pixi.js Hello Pixi.js Hello Pixi.js Hello Pixisq Hello",
                style: textStyle,
                anchor: 0
            })
            text.x = 0;
            text.y = 0;
            app.stage.addChild(text);


            //  第二种 BitmapText
            const bitmaptext = new PIXI.BitmapText({
                text: "Hello Pixi.js",
                style: textStyle,
                anchor: 0.5
            })
            bitmaptext.x = WIDTH / 2;
            bitmaptext.y = 200;
            app.stage.addChild(bitmaptext);

            //  第三种 HTMLText
            const HTMLtext = new PIXI.HTMLText({
                text: "<b>Bold</b> and <i>Italic</i>",
                style: textStyle,
                anchor: 0.5
            })
            HTMLtext.x = WIDTH / 2;
            HTMLtext.y = 300;
            app.stage.addChild(HTMLtext);

        }

        start()
        
    </script>
</body>
</html>